// **************************1.进入该页面，传入id进来；如何获取id??
//   id在哪呢？URL地址
//   URL地址
let arr = location.href.split("=");
let id = arr[1];



let layer;
let form;
layui.use(['layer', 'form'], function() {
  layer = layui.layer;
  form = layui.form;

  // *********************2.页面该有功能初始化
  $("select").append(`<option value="">请选择文章类别</option>`)
  $.ajax({
    url: "/my/article/cates",
    success: function(res) {
      if (res.status == 0) {
        $.each(res.data, function(index, item) {
          let one = $(`<option value=${item.Id}>${item.name}</option>`);
          $("select").append(one);
        });

        form.render('select'); //页面渲染元素重新渲染下
      }
    }
  });
  initEditor(); // 自己封装的
  $('#image').cropper({
    aspectRatio: 10 / 7,
    preview: '.img-preview'
  });
  $("#file_cp").on("click", function() {
    $("#file").click(); // JS代码模拟点击行为
  });
  $("#file").on("change", function() {
    let obj = this.files[0];
    let src = URL.createObjectURL(obj);
    $('#image').cropper("replace", src);
  });



  // **********************3.数据回填
  $.ajax({
    url: "/my/article/" + id,
    success: function(res) {
      if (res.status == 0) {
        form.val("edit", res.data);
        $('#image').cropper("replace", 'http://api-breakingnews-web.itheima.net' + res.data.cover_img);
      }
    }
  });




  // ***********************4.确认修改
  $("form").on("submit", function(e) {
    e.preventDefault();

    // 1.收集数据
    let fd = new FormData(this);
    fd.append("Id", id);


    // 2.图片 cropper处理：blob二进制
    let canvas = $('#image').cropper('getCroppedCanvas', {
      width: 400,
      height: 280
    });
    canvas.toBlob(function(blob) {
      fd.append("cover_img", blob); // 多fd添加一项

      // ajax必须写toBlob回调函数内部
      $.ajax({
        url: "/my/article/edit",
        type: "POST",
        data: fd,
        success: function(res) {
          layer.msg(res.message);
        },
        processData: false, // 不转换
        contentType: false, // 不编码
      });


    });





  });



})